<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>666</title>
    <style>
        .www {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            margin: auto;
            justify-content: center;

        }

        .www img {
            max-width: 100%;
            max-height: 100%;
        }


        .dots {
            margin-top: 10px;
            text-align: center;
        }

        .dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 3px;
            cursor: pointer;
        }

        .dot.active {
            background: blueviolet;
        }

        .title {
            display: flex;
            margin-top: 8px;
            font-size: 16px;
            color: #333;
            margin: auto;
        }
    </style>
</head>

<body>


    <div class="www">
        <img id="bigImg" src="img/娜美.jpg" alt="">
    </div>
    <div class="title">对人类来说会不会太超前了？</div>


    <div class="dots">
        <span class="dot active" data-i="0"></span>
        <span class="dot" data-i="1"></span>
        <span class="dot" data-i="2"></span>
    </div>

    <script>

        const sliderData = [
            { url: 'img/娜美.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100,67,68)' },
            { url: 'img/爱与恨德克萨斯.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43,35,26)' },
            { url: 'img/特雷西亚.jpg', title: '真正的jo厨出现了！', color: 'rgb(36,31,33)' }
        ];


        const bigImg = document.getElementById('bigImg');
        const title = document.getElementById('title');
        const dots = document.querySelectorAll('.dot');


        let now = 0;


        function change(index) {
            now = index;
            bigImg.src = sliderData[index].url;
            title.textContent = sliderData[index].title;
        }

        dots.forEach((d, index) => {
            d.onclick = function () {
                change(index);
            };
        });



        const ran = Math.floor(Math.random() * sliderData.length);
        change(ran);
    </script>
</body>

</html>